<template>
    <div class="container">
        <h1>这是关于页面</h1>
        <Heading :level="1">Hello geekbang!</Heading>
        <Heading :level="2">Hello geekbang!</Heading>
        <Heading :level="3">Hello geekbang!</Heading>
        <Heading :level="4">Hello geekbang!</Heading>
        <Heading :level="5">Hello geekbang!</Heading>
        <Heading :level="6">Hello geekbang!</Heading>
        <Todo />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Heading from '../components/Heading.jsx';
import Todo from '../components/Todo.jsx';

let count = ref(1);
let color = ref('red');

function add() {
    count.value++;
    color.value = Math.random() > 0.5 ? 'blue' : 'red';
}
</script>

<style scoped>
h1 {
    color: v-bind(color);
}
</style>
